<template>
  <div class='container-tags'>
    <el-card>
      <!-- 筛选:filter -->
      <el-row>
        <!-- 表单 -->
        <el-col :span="18">
          <!-- inline 表示行内表单样式 -->
          <el-form label-width="80px" inline size="small">
            <el-form-item label="标签名称">
              <el-input v-model="reqParams.tagsName"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="state">
              <!-- placeholder：n 占位符  vlue  -->
             <el-select
              v-model="reqParams.state"
              placeholder="请选择">
                <el-option
                  v-for="item in status"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="clear()">清除</el-button>
              <el-button type="primary" @click="search()">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <!-- 按钮 -->
        <el-button  @click="dialogFormVisible = true" style="float:right" type="success" icon="el-icon-edit" size="small">新增标签</el-button>
        <el-col :span="6"></el-col>
      <!-- 新增标签弹窗 -->
        <el-dialog title="新增标签" :visible.sync="dialogFormVisible">
        <el-form :model="form">
        <el-form-item label="所属学科" :label-width="formLabelWidth" prop="subjectsimple">
          <el-select
            v-model="reqParams.subjectsimple"
            placeholder="请选择"
          >
            <el-option
            v-for="item in subjectsimple.subjectID"
            :key="item"
            :label="item"
            :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="name" :label-width="formLabelWidth">
          <el-input v-model="reqParams.directoryName" autocomplete="off" placeholder="请输入目录名称"></el-input>
        </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addCancel()">取 消</el-button>
          <el-button type="primary" @click="addYes()">确 定</el-button>
        </div>
        </el-dialog>
        <el-col :span="6"></el-col>
      </el-row>
      <!-- 总计 -->
      <el-alert :title="`数据一共 ${total} 条`" type="info" :closable="false" style="margin-bottom: 15px" show-icon>
      </el-alert>
      <!-- 表格 -->
      <el-table :data="tags">
        <!-- label：n 标签 -->
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="所属学科" prop="subjectName"></el-table-column>
        <el-table-column label="标签名称" prop="tagName"></el-table-column>
        <el-table-column label="创建者" prop="username"></el-table-column>
        <el-table-column label="创建日期" width="160px">
          <template slot-scope="scope">
            {{scope.row.addDate | parseTimeByString}}
          </template>
        </el-table-column>
        <el-table-column label="状态">
           <template slot-scope="scope">
            {{scope.row.state === 1?'已启用':'已禁用'}}
          </template>
        </el-table-column>
        <el-table-column label="操作">
           <template slot-scope="scope">
            <el-button type="text" @click="handleStatus(scope.row)">
              <span v-if="scope.row.state==0">启用</span>
              <span v-else>禁用</span>
            </el-button>
            <el-link type="primary" :underline="false">修改</el-link>
            <el-link @click="delTages(scope.row.id)" :underline="false" type="primary">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
      class="pager"
      background
      layout="prev, pager, next, sizes, jumper"
      :total="total"
      :page-size="reqParams.pagesize"
      :current-page="reqParams.page"
      @current-change="changePager"
      @size-change="changeSize"
      :page-sizes="[5, 10, 20, 50]"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { status } from '@/api/hmmm/constants'
// 标签列表
import { list as tagsList, remove as tagsDel } from '@/api/hmmm/tags.js'
// 学科简单列表API
import { simple as subjectSimple } from '@/api/hmmm/subjects.js'
export default {
  name: 'tags-page', // 标签页面
  data () {
    return {
      options: [{
        state: '1',
        label: '启用'
      }, {
        state: '0',
        label: '禁用'
      }],
      // 新增标签弹窗相关
      subjectNameoptions: [{
        subjectName: 'subjectID',
        label: 'subjectID'
      }, {
        subjectName: '大数据',
        label: '大数据'
      }],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',
      // 没有这个state 选项填补上去
      state: '',
      // 参数：params
      reqParams: {
        // 标签名字，关键字
        tagsName: null,
        state: null,
        // 页码
        page: 1,
        // 尺寸
        pagesize: 10
      },
      reqParamstwo: {
        subjectID: null
      },
      subjectsimple: {
        subjectID: []
      },
      // 标签列表
      tags: [],
      // 总条数
      total: 0
    }
  },
  computed: {
    status () {
      return status
    }
  },
  created () { // 错误处！！！ created写错！ cearted：v动词   创造
    this.getTags()// 定义一个方法
  },
  methods: {
    // 添加标签栏的取消
    addCancel () {
      // 点取消时清空内容
      // 取消时关闭弹窗
      this.dialogFormVisible = false
    },
    // 添加标签栏的确定
    addYes () {
      // 点取消时清空内容
      // 取消时关闭弹窗
      this.dialogFormVisible = false
    },
    // 删除标签
    delTages (id) {
      this.$confirm('此操作将永久删除该标签, 是否继续?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await tagsDel({ id })
        this.$message.success('删除成功')
        this.getTags()
      }).catch(e => {})
    },
    // 获取目录列表
    async getTags () {
      // api 目录中的函数和接口和数据相关,api函数是以对象方式传递
      const { data } = await tagsList(this.reqParams)
      // 给data中的数据赋值
      this.tags = data.items
      this.total = data.counts
    },
    // 获取学科简单列表
    async getSubjectsSimple () {
      // api 目录中的函数和接口和数据相关,api函数是以对象方式传递
      const { data } = await subjectSimple(this.reqParamstwo)
      this.subjectsimple = data.items
    },
    // 分页
    changePager (newPage) {
      this.reqParams.page = newPage
      this.getTags()
    },
    // 改尺码
    changeSize (newSize) {
      this.reqParams.page = 1
      this.reqParams.pagesize = newSize
      this.getTags()
    },
    handleStatus () {
    },
    // 搜索
    search () {
      // 在此业务中 关键字是双向绑定的， 如果其他页面有需要改动的参数在搜索前改动即可
      this.reqParams.page = 1
      // 重新获取列表
      this.getTags()
    },
    // 清除
    clear () {
      this.reqParams = {
        // 目录名称内容用变为 null
        tagsName: null,
        // 状态内容用变为 null
        state: null,
        // 页码变为1
        page: 1,
        // 条数变为10
        pagesize: 10
      }
    }
  }
}
</script>

<style scoped lang='scss'>
  .container-tags {
    padding: 10px 15px;
    .pager {
      margin-top: 15px;
      margin-bottom: 15px;
      float: right;
    }
  }
  .el-link {
    margin-right: 10px;
  }
</style>
